<!--  -->
<template>
  <view class="page">
    <cu-custom
      :needBack="true"
      bgColor="bgNormal"
      :topTitle="expertId ? '编辑' : '新增'"
      titleClass="commTitleWhite"
      backIconColor="#fff"
    ></cu-custom>
    <view class="content">
			<view class="form">
				
				<view class="item">
					<view class="item-title"><span class="red">*</span>组名称</view>
					<u-input v-model="form.name" placeholder="请输入组名" />
				</view>
				
				<view class="item">
					<view class="item-title">组长</view>
					<view @click="handleMultiple(1)" class="select" :class="{selected: form.selectLeaderValue}">
						<view class="select-val">{{form.selectLeaderValue || '请选择'}}</view>
						<view class="icon">
							<u-icon :name="selectMultiple.show && selectType == 1 ? 'arrow-up-fill' : 'arrow-down-fill' " color="#c0c4cc" size="25"></u-icon>
						</view>
					</view>
				</view>
				
				<view class="item">
					<view class="item-title"><span class="red">*</span>组员</view>
					<view @click="handleMultiple(2)" class="select"  :class="{selected: form.selectTeamValue}">
						<view class="select-val">{{form.selectTeamValue || '请选择'}}</view>
						<view class="icon">
							<u-icon :name="selectMultiple.show && selectType == 2  ? 'arrow-up-fill' : 'arrow-down-fill' " color="#c0c4cc" size="25"></u-icon>
						</view>
					</view>
				</view>
					
			</view>
			
			<view class="footer">
				<u-button @click="confirm" class="btn" type="primary">{{ expertId ? '确认修改' : '确认新增' }}</u-button>
			</view>
    </view>
		
		
		<!-- 选择专家 -->
		<multiple-picker 
				title="请选择组长" 
				:show="selectMultiple.show" 
				:columns="teamUserList" 
				:isMultiple="selectMultiple.isMultiple"
				:defaultIndex="selectMultiple.index" 
				idKey="userId"
				label="nickName"
				@confirm="confirmMultiple" 
				@cancel="selectMultiple.show = false"
		></multiple-picker>

  </view>
</template>

<script>
import { expertUserPage, orgPage, addOrUpExpertGroup, getExpertGroup } from "@/api/expertManager.js";
export default {
  data() {
    return {
			topTitle: '新增专家分组',
			expertId: '',
			form: {
				name: '',
				selectLeaderValue: '',
				selectLeaderIndex: [],
				selectTeamValue: '',
				selectTeamIndex: [],
				selectOrgValue: '',
				selectOrgIndex: []
			},
      detail: [],
			selectType: 1, // 1 组长  2 组员 
			selectMultiple: {
				show: false,
				orgShow: false,
				isMultiple: true,
				index: []
			},
			teamUserList: [],
			orgList: []
    };
  },
  onLoad(options) {
    console.log('options', options);
		this.expertId = options.expertId || ''
		if (this.expertId) {
			this.loadDetail()
		}
    this.loadExpertUserPage()
		// this.loadOrgList()
  },
  methods: {
		// 保存
		confirm() {
			if (!this.form.name) return this.showToast('专家组名称不可为空')
			if (this.form.selectTeamIndex.length <= 0) return this.showToast('请选择组员')
			
			let leaderList = this.form.selectLeaderIndex.map(v => {
				return { leaderFlag: 1, userId: v }
			})
			
			if (leaderList.length > 0 && this.form.selectTeamIndex.includes(leaderList[0].userId)) {
				return this.showToast('组长不能出现在组员中')
			}
			
			let teamList = this.form.selectTeamIndex.map(v => {
				return { leaderFlag: 0, userId: v }
			})
			
			// 发送参数
			let params = {
				name: this.form.name,
				members: [...leaderList, ...teamList]
			}
			if (this.expertId) {
				params.id = this.expertId
			}
			console.log('params', params);
			addOrUpExpertGroup(params).then(res => {
				if (res.code == 200) {
					this.showToast(this.expertId ? '更新成功': '新增成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					this.showToast(res.msg)
				}
			})
			
		},
		showToast(title) {
			uni.showToast({
			  title,
			  icon: "none"
			})
		},
		// 打开选择
		handleMultiple(selectType) {
			this.selectType = selectType
			if (this.selectType == 1) {
				this.selectMultiple.index = this.form.selectLeaderIndex || []
				this.selectMultiple.isMultiple = false
				this.selectMultiple.show = true;
			} else if (this.selectType == 2) {
				this.selectMultiple.index = this.form.selectTeamIndex || []
				this.selectMultiple.isMultiple = true
				this.selectMultiple.show = true;
			} else {
				this.selectMultiple.index = this.form.selectOrgIndex || []
				this.selectMultiple.isMultiple = true
				this.selectMultiple.orgShow  = true
			}
		},
		// 确认选择
		confirmMultiple(e) {
			console.log(e);
			let temp = [];
			e.selected.forEach(item => {
					temp.push(item.label);
			})
			if (this.selectType == 1) {
				this.form.selectLeaderValue = temp.toString()
				this.form.selectLeaderIndex = e.value
			} else if (this.selectType == 2) {
				this.form.selectTeamValue = temp.toString()
				this.form.selectTeamIndex = e.value
			} else {
				this.form.selectOrgValue = temp.toString()
				this.form.selectOrgIndex = e.value
			}
			this.selectMultiple.orgShow  = false
			this.selectMultiple.show = false
		},
		// 获取详情
		loadDetail() {
			let params = {
				id: this.expertId
			}
			getExpertGroup(params).then(res => {
				if (res.code == 200) {
					let data = res.data || {}

					// 解析值回显
					let tempForm = {
						id: data.id,
						name: data.name
					}
					let leaderList = data.members.filter(v => v.leaderFlag == 1)
					let teamList = data.members.filter(v => v.leaderFlag == 0)
					tempForm.selectLeaderValue = leaderList.map(v => v.nickName).join(',')
					tempForm.selectLeaderIndex = leaderList.map(v => v.userId + '')
					
					tempForm.selectTeamValue = teamList.map(v => v.nickName).join(',')
					tempForm.selectTeamIndex = teamList.map(v => v.userId + '')
					this.form = tempForm
				}
			})
		},
    loadExpertUserPage() {
			let params = {
				current: 1,
        size: 1000,
        roleKeys: 'EXPERT'
      }
      expertUserPage(params).then((res) => {
        if (res.code == 200) {
          this.teamUserList = res.data.records || []
        } else {
					this.showToast(res.msg)
        }
      });
    },
		loadOrgList() {
			let params = {
				current: 1,
		    size: 1000,
		    currentDeclarationSystem: 1
		  }
		  orgPage(params).then((res) => {
		    if (res.code == 200) {
		      this.orgList = res.data?.resultPage?.records || []
					console.log('orgList', this.orgList);
		    } else {
		      this.showToast(res.msg)
		    }
		  });
		},
    getHeight() {
      return `calc(100vh - ${this.CustomBar}px)`;
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.content {
	flex: 1;
	width: 100%;
  font-size: 28rpx;
  color: #999;
	background: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}
.footer {
	padding: 30rpx;
	border-top: 1px solid #efefef;
}
.form {
	flex: 1;
	padding: 25rpx;
	width: 100%;
	box-sizing: border-box;
	.red {
		color: red;
		padding-right: 5rpx;
	}
	.item {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 25rpx;
			padding: 15rpx 10rpx;
			border-bottom: 1px solid #efefef;
			.item-title {
				width: 145rpx;
			}
			.select {
				flex: 1;
				display: flex;
				padding: 10rpx 0;
				color: #c0c4cc;
				// border: 1px solid red;
				.select-val {
					flex: 1;
				}
				.icon {
					width: 32rpx;
					text-align: right;
				}
				&.selected {
					color: black;
				}
			}
	}
}
</style>
